<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>练习 - 网页时钟</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .clock {
      width: 600px;
      height: 600px;
      background: url(./images/clock.jpg) no-repeat;
      margin: 50px auto 0;
      position: relative;
    }

    .hh,
    .mm,
    .ss {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: url(./images/hour.png) no-repeat center;
    }

    .hh {
      transform: rotate(18deg);
    }

    .mm {
      background-image: url(./images/minute.png);
      transform: rotate(270deg);
    }

    .ss {
      background-image: url(./images/second.png);
      transform: rotate(0deg);
    }
  </style>
</head>

<body>
  <div class="clock">
    <div class="hh" id="h"></div>
    <div class="mm" id="m"></div>
    <div class="ss" id="s"></div>
  </div>
  <script>
    // 小时
    let hh = document.querySelector('.hh')
    // 分钟
    let mm = document.querySelector('.mm')
    // 秒
    let ss = document.querySelector('.ss')

    // 获取当前时间
    let myDate = new Date()
    // 获取小时
    let hhh = myDate.getHours()
    // 分钟
    let mmm = myDate.getMinutes()
    // 秒数
    let sss = myDate.getSeconds()

    /* 秒针 1秒走6度
    分钟 60秒（秒钟360度）走 6度
    时针 每隔12分钟，让时针走6度 */

    let deg = sss * 6
    let m = mmm * 6
    let h = hhh * 30

    h = h + parseInt(mmm / 12) * 6

    ss.style.transform = `rotate(${deg}deg)`
    mm.style.transform = `rotate(${m}deg)`
    hh.style.transform = `rotate(${h}deg)`


    setInterval(function () {
      // 秒钟 每秒旋转6度 也就是时钟图的一秒
      deg += 6
      ss.style.transform = `rotate(${deg}deg)`
      // 每次秒针转了 360deg 的时候，分钟转 6deg
      if (deg % 360 === 0) {
        m += 6
        mm.style.transform = `rotate(${m}deg)`
        // 分钟走了12格(72deg)的时候，小时的时针才会走一格(6deg)
        if (m % 72 === 0) {
          h += 6
          hh.style.transform = `rotate(${h}deg)`
        }
      }
    }, 1000)
  </script>
</body>

</html>